<template>
  <div>
    <basic-container>
      <!--<avue-tabs :option="option"
                 v-model="form"
                 @change="handleChange"
                 @submit="handleSubmit"></avue-tabs>-->
      <el-tabs @tab-click="switchTab" v-model="switchStatus" tabPosition="left">
        <el-tab-pane label='基本信息' name='userManager'>
          <el-form :model="ruleForm"
                   ref="ruleForm"
                   label-width="100px"
                   v-if="switchStatus==='userManager'">
            <el-form-item label="">
              <avue-form :option="optionAvatar" v-model="ruleForm" :upload-after="handleAvatarSuccess"></avue-form>
            </el-form-item>
            <el-form-item label="用户名"
                          prop="username">
              <el-input type="text" v-model="ruleForm.name" ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-row>
                <el-col :span="24">
                  <el-input v-model="ruleForm.phone" placeholder="请绑定手机号"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary"
                         @click="handleSubmit()">提交
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label='修改密码' name='passwordManager'>
          <el-form :model="ruleForm"
                   :rules="rules"
                   ref="ruleForm"
                   label-width="100px"
                   v-if="switchStatus==='passwordManager'">
            <el-form-item label="原密码"
                          prop="password">
              <el-input type="password"
                        v-model="ruleForm.oldPassword"></el-input>
            </el-form-item>
            <el-form-item label="密码"
                          prop="newpassword1">
              <el-input type="password"
                        v-model="ruleForm.newPassword"></el-input>
            </el-form-item>
            <el-form-item label="确认密码"
                          prop="newpassword2">
              <el-input type="password"
                        v-model="ruleForm.newPassword1"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="handleSubmit()">提交
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </basic-container>
  </div>
</template>

<script>
  import md5 from 'js-md5'
  import option from "@/const/user/info";
  import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user";


  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (this.ruleForm.password !== '') {
          if (value !== this.ruleForm.newpassword1) {
            callback(new Error('两次输入密码不一致!'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        type: "info",
        option: option,
        form: {},
        switchStatus: 'userManager',
        ruleForm: {},
        rules: {
          oldPassword: [{required: true, min: 5, message: '原密码不能为空且不少于5位', trigger: 'change'}],
          newPassword: [{required: true, min: 5, message: '不少于5位', trigger: 'change'}],
          newPassword1: [{required: true, validator: validatePass, trigger: 'blur'}]
        },
        treeOrganData: [],
        organProps: {
          label: 'name',
          value: 'id',
        },
        optionAvatar: {
          emptyBtn: false,
          submitBtn: false,
          labelWidth: 0,
          column: [
            {
              prop: 'avatar',
              type: 'upload',
              listType: 'picture-img',
              action: '/api/uic-resource/oss/endpoint/put-file',
              propsHttp: {
                res: 'data',
                url: 'link',
              },
              loadText: '附件上传中，请稍等',
              span: 24,
              tip: '只能上传jpg/png文件，且不超过500kb',
            }
          ]
        },
      };
    },
    created() {
      this.handleWitch();
    },
    methods: {
      switchTab(tab, event) {
        this.switchStatus = tab.name
      },
      handleSubmit() {
        if (this.switchStatus === "userManager") {
          updateInfo(this.ruleForm).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改信息成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
        } else {
          updatePassword(md5(this.ruleForm.oldPassword), md5(this.ruleForm.newPassword), md5(this.ruleForm.newPassword1)).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改密码成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
        }
      },
      handleWitch() {
        if (this.switchStatus === "userManager") {
          getUserInfo().then(res => {
            const user = res.data.data;
            this.ruleForm = {
              id: user.id,
              avatar: user.avatar,
              name: user.name,
              realName: user.realName,
              phone: user.phone,
              email: user.email,
            }
          });
        }
      }
    }
  };
</script>

<style>
</style>
